<template>
  <div>
    <YinputSelect
      style="width: 300px"
      v-model="pageData.searchValue"
      :options="pageData.invoiceTypeRes"
      label-field="gmbCorpName"
      value-field="gmbCorpId"
      :isPage="true"
      :total="7958"
      @keywordSearchList="keywordSearchList"
      @scrollBottom="scrollBottom"
      @select="selectChange"
    />
    <p>splitpanes示例</p>
    <splitpanes class="default-theme" horizontal style="height: 400px">
      <paneSpan min-size="20" max-size="70"> 1 </paneSpan>
      <paneSpan> 2 </paneSpan>
      <paneSpan max-size="70"> 3 </paneSpan>
    </splitpanes>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import YinputSelect from './components/index'
type PageData = {
  [key: string]: any
}
const pageData: PageData = reactive({
  searchValue: 10,
  invoiceTypeRes: [
    { gmbCorpName: '强哥', gmbCorpId: 10 },
    { gmbCorpName: '小杨1', gmbCorpId: 1 },
    { gmbCorpName: '小杨2', gmbCorpId: 2 },
    { gmbCorpName: '小杨3', gmbCorpId: 3 },
    { gmbCorpName: '小杨4', gmbCorpId: 4 },
    { gmbCorpName: '小杨5', gmbCorpId: 5 },
    { gmbCorpName: '小杨6', gmbCorpId: 6 },
    { gmbCorpName: '小杨7', gmbCorpId: 7 },
    { gmbCorpName: '小杨8', gmbCorpId: 8 },
    { gmbCorpName: '小杨9', gmbCorpId: 9 }
  ]
})
// 执行搜索
const keywordSearchList = async (val: string | number) => {
  console.log(val, '搜索条件')
}
// 滚动到底执行
const scrollBottom = async () => {
  console.log('滚动了')
}
// 选择了
const selectChange = (val: any) => {
  console.log(val, '选择了数据')
}
</script>

<style lang="less" scoped>
.default-theme {
  background: rgb(165, 165, 240) !important;
}
</style>
